<!--  -->
<template>
  <div>
    <my-echarts :options="option"></my-echarts>
  </div>

</template>
<script setup lang='ts' >
import { computed, PropType } from "vue"
import MyEcharts from "@/base-ui/echarts"

import { IRoseData } from "./types.ts"
const props = defineProps({
  pieData: {
    type: Array as PropType<IRoseData[]>,
    required: true
  },
})
let option = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: '8%',
      left: 'center'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: props.pieData


      }
    ]
  }

})



</script>
<style lang='less' scoped>
</style>
